<template>
  <div class="daylyOutputContainer">
    <div class="chanliang-item">
      <chanliang :dataNumber="totalCount" title="产量" />
    </div>
    <div class="chanliang-item">
      <chanliang :dataNumber="qualifiedCount" title="合格数" />
    </div>
    <div class="chanliang-item">
      <chanliang :dataNumber="unqualifiedCount" title="不合格数" />
    </div>
    <div class="chanliang-item">
      <chanliang :dataNumber="qualifiedRatio" title="合格率" />
    </div>
  </div>
</template>
<script>
import chanliang from './chanliang.vue'
import {getTodayEquipOutput} from '/@/api/visualizing/master'
import lodash from 'lodash'
import {decimalToPercentage} from '/@/views/visualizing/utils'
export default {
  components: {
    chanliang
  },
  data() {
    return {
      totalCount: 0,
      qualifiedCount: 0,
      unqualifiedCount: 0,
      qualifiedRatio: 0,
      unqualifiedRatio: 0,
    }
  },
  methods: {
    async getTodayOutput() {
      const res = await getTodayEquipOutput()
      this.totalCount = lodash.get(res, 'data.totalCount', 0)
      this.qualifiedCount = lodash.get(res, 'data.qualifiedCount', 0)
      this.unqualifiedCount = lodash.get(res, 'data.unqualifiedCount', 0)
      this.qualifiedRatio = decimalToPercentage(lodash.get(res, 'data.qualifiedRatio', '0.00'))
      this.unqualifiedRatio = decimalToPercentage(lodash.get(res, 'data.unqualifiedRatio','0.00'))
    }
  },
  mounted() {
    this.getTodayOutput()
    setInterval(() => {
      this.getTodayOutput()
    }, 3000)
  }
}
</script>
<style lang="scss" scoped>
.daylyOutputContainer {
  width: 100%;
  height: 100%;
  display: grid;
  margin-top: 20px;
  grid-template-columns: 200px 200px;
  /* 两列 */
  grid-template-rows: 90px 90px;
  /* 两行 */
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;

  /* 水平方向居中 */
  .chanliang-item {
    height: 80px;
    text-align: center;
  }
}
</style>